<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06自定义js对象</title>
</head>
<body>

<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品剩余</th>
    </tr>
</table>
<script>

    let productArr = [
        {title:'绢花',price:800,num:100},
        {title:'曹操',price:900,num:90},
        {title:'杜鹃',price:80,num:100},
        {title:'顾顾',price:200,num:100},
    ]
    for(var i = 0;i<productArr.length;i++){
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        td1.innerHTML = productArr[i].title;
        td2.innerHTML = productArr[i].price;
        td3.innerHTML = productArr[i].num;
        tr.append(td1,td2,td3);
        var table = document.querySelector('table');
        table.append(tr);
    }

    let p1={
        name:'张三',
        age:18,
        say:function(){
            console.log('我是'+this.name+',今年'+this.age+'岁了');
        }
    }
    console.log(p1);
    p1.say();
//     先创建一个空对象，再动态添加其属性与方法
    let p2 = {};
    p2.name = '李四';
    p2.age = 19;
    p2.say = function (){
        console.log('我是'+this.name+',今年'+this.age+'岁了');
    }
    console.log(p2);
    p2.say();

</script>

</body>
</html>